@import (reference) "./../../shared/common";
@import (reference) "./../../shared/constants";
.zone-down,
.zone-down-title {
  border-top: @border-simple-dark;
  .display-flex(row);
  .flex(0, 0);
  &>* {
    &+* {
      // margin-left: @space-common;
      border-left: 1px solid @color-gray-main;
    }
  }
  .zone-chart {
    width: 28.975% + 9.78795%;
    flex-grow: 2;
  }
  .basic-info {
    width: 19.5759%;
    flex-grow: 1;
    @media(max-width: @screen-md-min) {
      display: none;
    }
  }
  .bidask {
    width: 19.5759%;
    .flex-shrink(0);
    flex-grow: 1;
  }
  .component-header {
    background-color: @color-gray-light-view-background;
    font-size: 1.4rem;
    height: 30px;
    line-height: 30px;
    padding: 0 @space-common;
  }
  basic-info {
    padding: @space-common;
    background-color: @color-white;
  }
}

.main-container,
.detail-container {
  height: calc(~"100% - 36px");
}

.main-container {
  &>* {
    width: 100%;
  }
  //高度部分
  // height: 100%;
  .display-flex();
  // margin: @space-common;
  .zone-up {
    height: 50%;
    .flex();
    .quote-table {
      height: calc(~"100% - 30px");
    }
  }
  .zone-down {
    height: 43.9746%;
    margin-bottom: 0;
    // padding: @space-common;
    background-color: @color-gray-light-view-background;
    border-top: 1px solid @color-gray-main;
  }
  // margin-right: @width-sidebar-right;
}

.detail-container {
  width: @width-sidebar-right;
  border-left: @border-simple-dark;
  float: right;
  overflow-y: auto;
}